<template>
    <div class="buy_package">
        <el-row>
            <!-- 头部 -->
            <el-col :span="24">
                <div class="header_view">
                    <div class="left">
                        <p>捷存云</p>
                    </div>
                    <div class="right">
                        <div class="item">
                            <div class="user_info">
                                <el-avatar size="medium" :src="info.avatar"></el-avatar>
                                <div class="names">
                                    <span>{{ info.name }}</span>
                                    <span style="margin-top: 3px;">{{ info.phone }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="item" @click="logout">退出</div>
                    </div>
                </div>
            </el-col>

            <!-- 卡片 -->
            <div class="blue_bg">
                <div class="title">
                    <span>提升效率，降低成本</span>
                    <span class="sub_title">让您轻松管理生意</span>
                </div>
                <div class="cards">
                    <div class="card" v-for="(item, index) in packages" :key="'card_'+item.id"
                        :class="item.className">
                        <div class="pname">{{ item.package_name }}
                            <div class="jian" v-if="item.showTuiJian">推荐</div>
                        </div>
                        <div class="price">
                            <span class="unit">￥</span>
                            <span class="money">{{ item.price }}</span>
                            <span class="year" v-if="index===0">/年</span>
                            <span class="year" v-else>{{ '/'+(index+1)+'年' }}</span>
                        </div>
                        <div class="tips" :style="{visibility: index>0?'visible':'hidden'}">{{ '赠送'+index+'个月时长' }}</div>
                        <div class="buy_btn" @click="showBuyDialog(item)">立即购买</div>
                        <div class="date">有效期至：{{ item.expirationDate }}</div>
                    </div>
                </div>
            </div>

            <!-- 产品功能介绍 -->
            <div class="desc">
                <div class="head">产品功能介绍</div>
                <div class="common_line"></div>
                <div class="list">
                    <div class="item" v-for="item in lists" :key="item">
                        <i class="el-icon-check"></i>
                        <span>{{ item }}</span>
                    </div>
                </div>
            </div>
        </el-row>

        <el-dialog
            title="套餐购买"
            :visible.sync="dialogVisible"
            width="55%"
            :close-on-click-modal="false"
            append-to-body>
            <div class="pay_view">
                <div class="left">
                    <div class="item title">套餐信息</div>
                    <div class="item">套餐名称：{{ choosePackage.package_name }}</div>
                    <div class="item">购买年限：{{ choosePackage.year_name }}</div>
                    <div class="item">到期时间：{{ choosePackage.expirationDate }}</div>

                    <div class="item title" style="padding-top: 10px;">联系方式</div>
                    <div class="item">姓名</div>
                    <div class="item">
                        <el-input style="width: 260px" v-model="payForm.name" placeholder="请输入姓名" maxlength="20" clearable></el-input>
                    </div>
                    <div class="item">手机</div>
                    <div class="item">
                        <el-input style="width: 260px" v-model="payForm.phone" placeholder="请输入手机" maxlength="20" clearable></el-input>
                    </div>
                    <div class="item">反馈意见</div>
                    <div class="item">
                        <el-input style="width: 260px" maxlength="400" show-word-limit type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="payForm.remark" placeholder="请输入" clearable />
                    </div>
                </div>
                <div class="right">
                    <div class="blue_line"></div>
                    <div class="item title">
                        <span>套餐金额</span>
                        <span>{{ '￥'+choosePackage.price_tofixed }}</span>
                    </div>
                    <div class="item">
                        <span>运费</span>
                        <span>0.00</span>
                    </div>
                    <div class="item">
                        <span>活动优惠</span>
                        <span>-0.00</span>
                    </div>
                    <div class="item">
                        <span>优惠券</span>
                        <span>无可用优惠券</span>
                    </div>
                    <div class="gray_line"></div>
                    <div class="item">
                        <span>实付金额</span>
                        <span class="big_num">{{ '￥'+choosePackage.price_tofixed }}</span>
                    </div>

                    <div class="item title" style="padding: 16px 0 5px 0;">支付方式</div>
                    <div class="item" v-for="(item, index) in payTypes" :key="'pay_'+index">
                        <div style="display: inline-flex;align-items: center;">
                            <img :src="item.icon" alt="">
                            {{ item.pay_name }}</div>
                        <span class="gou" :class="item.selected?'el-icon-check selected': ''"
                            @click="choosePay(item)"></span>
                    </div>

                    <div class="pay_btn" @click="payStart">立即支付</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getPackageList, createProductOrder, getPayStatus, aliPay, wxPay } from '@/api/common';
export default {
    name: 'buyPackage',
    data() {
        return {
            dialogVisible: false,
            corp_id: '',
            packages: [],
            info: {
                avatar: '',
                name: '',
                phone: ''
            },
            lists: [
                '多用户、分权限记账',
                '客户/供应商管理',
                '员工管理、日常考勤',
                '销售预定、采购预定',
                '经营状况分析',
                '客户销售榜',
                '商品采销分析',
                '员工提成统计',
                '库存统计等更多功能'
            ],
            choosePackage: {},
            payForm: {
                name: '',
                phone: '',
                remark: ''
            },
            payTypes: [
                {pay_name: '微信', id: 'wx', icon: 'https://anhuiyaoying.com/webs/wx.png', selected: true},
                {pay_name: '支付宝', id: 'zfb', icon: 'https://anhuiyaoying.com/webs/zfb.png', selected: false},
            ],
            payType: 'wx',
            payId: ''
        }
    },
    created() {
        this.info.avatar = this.$store.state.avatar
        this.info.name = this.$store.state.userInfo.username
        this.info.phone = this.$store.state.userInfo.phone_no
        this.corp_id = this.$store.state.corpId;
        this.getPackage()
    },
    methods: {
        // 获取套餐费用
        getPackage() {
            let that = this
            getPackageList({corp_id: this.corp_id}).then(res => {
                that.packages = res.data.filter((item, index) => {
                    
                    item.price = parseInt(item.price_android)/100
                    item.expirationDate = item.expire_time_show.substring(0, 10)
                    item.showTuiJian = false

                    if (index == 0){
                        item.package_name = '套餐一'
                        item.year_name = '一年'
                        item.className = 'card_left'
                    }else if (index == 1){
                        item.package_name = '套餐二'
                        item.year_name = '两年'
                        item.className = 'card_center'
                        item.showTuiJian = true
                    }else if (index == 2){
                        item.package_name = '套餐三'
                        item.year_name = '三年'
                        item.className = 'card_right'
                    }
                    return item
                })
            })  
        },
        // 购买弹窗
        showBuyDialog(item) {
            this.choosePackage = item
            this.choosePackage.price_tofixed = item.price.toFixed(2)
            this.payForm.name = this.info.name
            this.payForm.phone = this.info.phone
            this.dialogVisible = true
        },
        // 选择支付方式
        choosePay(item) {
            this.payTypes.forEach(_item => {
                _item.selected = false
                if (item.pay_name == _item.pay_name){
                    _item.selected = true
                    this.payType = _item.id
                }
            })
        },
        // 支付
        payStart() {
            let that = this
            createProductOrder({
                corp_id: this.corp_id,
                goods_item_id: this.choosePackage.id,
                total_fee: this.choosePackage.price_android,
                // total_fee: 1,
                pay_type: this.payType=='wx' ? 3 : 2
            }).then(res => {
                if (res.code == 200){
                    that.payId = res.data.id
                    that.dialogVisible = false
                    that.$alert('请确认购买结果', '提示', {
                        confirmButtonText: '查看支付结果',
                        callback: action => {
                            // 刷新支付状态
                            that.refreshPayStatus()
                        }
                    });
                    if (that.payType == 'wx'){
                        that.startWxPay()
                    }else {
                        that.startAliPay()
                    }
                }
            })
        },
        // 开始微信支付
        startWxPay() {
            wxPay({
                corp: this.corp_id,
                pk_id: this.payId
            }).then(res => {
                if (res.data.code_url) {
                    let url = location.href.split('#')[0]+'#/wxPay'
                    let param = '?code_url='+encodeURIComponent(res.data.code_url)+
                        '&amount='+this.choosePackage.price_android
                    window.open(url+param)
                }
            })
        },
        // 开始支付宝支付
        startAliPay() {
            aliPay({
                corp: this.corp_id,
                pk_id: this.payId
            }).then(res => {
                if (res.data.pay_url) {
                    window.open(res.data.pay_url)
                }
            })
        },
        // 刷新支付状态
        refreshPayStatus() {
            let that = this
            getPayStatus({
                corp_id: this.corp_id,
                pk_id: this.payId
            }).then(res => {
                if (res.code == 200){
                    let state = res.data.pay_status
                    if (state===1 || state===3){  //成功
                        that.$message.success('支付成功')
                        that.getPackage()
                    }else {
                        that.$alert('抱歉，支付失败！详情可咨询客服。', '提示', {
                            confirmButtonText: '确认',
                            callback: action => {
                                that.getPackage()
                            }
                        });  
                    }
                }else{

                }
            })
        },
        logout() {
            this.$store.dispatch('FedLogOut')
            this.$router.replace('login')
        }
    }
}
</script>

<style lang="less" scoped>
	@import '../../style/mixin';
    .buy_package{
        background: #f0f1f2;
        padding-bottom: 20px;
		.header_view {
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50px;
			background: #fff;
			color: @blue;
			.left {
				font-size: 17px;
				font-weight: bold;
				letter-spacing: 1.5px;
			}
			.right {
				display: flex;
				align-items: center;
				.item {
					margin-left: 30px;
					font-size: 14px;
					.badge_item {
						margin-right: 20px;
					}
					.user_info {
						display: flex;
						align-items: center;
						.names {
							margin-left: 8px;
							display: inline-flex;
							flex-direction: column;
							font-size: 13px;
							color: @blue;
						}
					}
					&:hover {
						cursor: pointer;
					}
				}
                
			}
		}
        .blue_bg {
            background: @blue;
            width: 100%;
            height: 520px;
            .title {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #fff;
                width: 100%;
                padding-top: 50px;
                font-size: 32px;
                letter-spacing: 2px;
                .sub_title {
                    font-size: 23px;
                    margin-top: 12px;
                }
            }
            .cards {
                width: 1056px;
                margin: 0 auto;
                margin-top: 85px;
                position: relative;
                .card {
                    width: 360px;
                    background: #fff;
                    box-shadow: 0 4px 10px rgba(51, 51, 51, 0.1);
                    border-radius: 6px;
                    padding-bottom: 30px;
                    .pname {
                        text-align: center;
                        margin-top: 30px;
                        color: #333;
                        font-weight: bold;
                        font-size: 32px;
                        position: relative;
                        .jian {
                            height: 20px;
                            line-height: 20px;
                            border-radius: 10px;
                            background-color: #f56c6c;
                            color: #fff;
                            text-align: center;
                            font-weight: 400;
                            font-size: 13px;
                            position: absolute;
                            top: -10px;
                            right: 85px;       
                            padding: 0 8px;
                        }
                    }
                    .price {
                        text-align: center;
                        margin-top: 20px;
                        .unit {
                            font-size: 20px;
                            color: @blue;
                            margin-right: 3px;
                        }
                        .money {
                            font-weight: bold;
                            font-size: 44px;
                            color: @blue;
                        }
                        .year {
                            font-size: 16px;
                            color: #999;
                        }
                    }
                    .tips {
                        text-align: center;
                        color: #999;
                        margin-top: 5px;
                    }
                    .buy_btn {
                        width: 100px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        font-size: 14px;
                        background: @blue;
                        color: #fff;
                        margin: 34px auto;
                        border-radius: 3px;
                        cursor: pointer;
                    }
                    .date {
                        text-align: center;
                        font-size: 15px;
                        color: #666;
                    }
                }
                .card_left {
                    position: absolute;
                    left: 0;
                    z-index: 10;
                }
                .card_center {
                    position: absolute;
                    left: 348px;
                    top: -30px;
                    z-index: 20;
                }
                .card_right {
                    position: absolute;
                    right: 0;
                    z-index: 10;
                }
            }
        }
        .desc {
            width: 720px;
            margin: 0 auto; 
            margin-top: 150px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(51, 51, 51, 0.1);
            padding: 20px;
            .head {
                margin-left: 10px;
                color: #333;
                font-weight: bold;
            }   
            .list {
                padding: 0 0 0 50px;
                .item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;
                    font-size: 15px;
                    i {
                        color: @blue;
                        font-size: 18px;
                        margin-right: 10px;
                    }
                    span {
                        font-size: 15px;
                    }
                }
            }
        }
	}
    .pay_view {
        width: 100%;
        height: 420px;
        margin-top: -30px;
        display: flex;
        .left {
            width: 60%;
            padding: 10px 30px;
            border-right: 1px solid #eee;
            .item {
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
            }
            .title {
                font-size: 16px;
                font-weight: bold;
            }
        }
        .right {
            width: 40%;
            padding: 10px 40px;
            position: relative;
            .blue_line {
                width: 100%;
                background: @blue;
                height: 5px;
                margin-bottom: 12px;
            }
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
                .big_num {
                    font-size: 32px;
                }
                img {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
                .gou {
                    width: 15px;
                    height: 15px;
                    border: 1px solid #dcdfe6;
                    cursor: pointer;
                    &:hover {
                        border: 1px solid @blue;
                    }
                }
                .selected {
                    background: @blue;
                    color: #fff;
                }
            }
            .title {
                font-size: 16px;
                font-weight: bold;
            }
            .gray_line {
                width: 100%;
                background: #C0C4CC;
                margin-bottom: 12px;
                padding-top: 2px;
            }
            .pay_btn {
                position: absolute;
                width: 128px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                cursor: pointer;
                background: @blue;
                box-shadow: 0 2px 0 0 @blue;
                border-radius: 4px;
                color: #FFFFFF;
                font-size: 16px;
                right: 40px;
                bottom: 20px;
            }
        }
    }
</style>